<template>
<div class="MainUse">
    <div class="application-head">
        <a-input v-model="keyword"  STYLE="width: 400px;margin-right: 10px" :placeholder="i18n('head.name','应用名称','input')" />
        <a-button @click="search()">
            {{$ti18('rxList.searchForBtn','搜索')}}
        </a-button>
        <a-icon style="float: right" @click="close" type="close" />
    </div>
    <div class="MainUse_recently">
        <div v-if="useId =='collect'">
            <div class="MainUse_recently_head">
                {{i18n('head.application','收藏应用')}}
            </div>
            <ul class="MainUse_recently_user">
                <li v-for="(app,index) of favoriteList" :key="app.appId" v-if="app.hide==false">
                    <div class="MainUse_recently_come">
                        <div :style="{'background':app.backColor}">
                            <span v-show="false"> {{appIcon=JSON.parse(app.icon)}} </span>
                            <em  v-if="['customIcon','userCustomIcon'].includes(appIcon.type)" >
                                <my-icon :type="appIcon.icon"></my-icon>
                            </em>
                            <em v-else>
                                <a-icon  :type="appIcon.icon" />
                            </em>
                        </div>
                        <span>{{$i18(app.clientName)}}</span>
                    </div>
                    <div class="MainUse_recently_hove">
                          <span @click="preview(app,'favorite')">
                              <i class="iconfont iconicon-test"></i>
                              <i>{{i18n('head.enterApplication','进入应用')}}</i>
                          </span>
                        <span>
                              <i style="color: rgb(255 219 87)" @click="cancelFavorite(app.appId,index,true)"  class="iconfont iconstar-collection-fill"></i>
                              <i style="color: rgb(255 219 87)">{{i18n('head.uncollect','取消收藏')}}</i>
                        </span>
                    </div>
                </li>
            </ul>
        </div>
        <div v-if="useId =='use'">
            <div class="MainUse_recently_head">{{i18n('head.usedApplication','最近使用应用')}}</div>
            <ul class="MainUse_recently_user">
                <li v-for="(app,index) of saveLastUseList" :key="app.appId" v-if="app.hide==false">
                    <div class="MainUse_recently_come">
                        <div :style="{'background':app.backColor}">
                            <span v-show="false"> {{appIcon=JSON.parse(app.icon)}} </span>
                            <em  v-if="['customIcon','userCustomIcon'].includes(appIcon.type)" >
                                <my-icon :type="appIcon.icon"></my-icon>
                            </em>
                            <em v-else>
                                <a-icon  :type="appIcon.icon" />
                            </em>
                        </div>
                        <span>{{$i18(app.clientName)}}</span>
                    </div>
                    <div class="MainUse_recently_hove">
                          <span @click="preview(app,'saveLast')">
                              <i class="iconfont iconicon-test"></i>
                              <i>{{i18n('head.enterApplication','进入应用')}}</i>
                          </span>
                        <span>
                              <i v-if="app.isFav ==0"  @click="Collecting(app.appId,index)" class="iconfont iconstar-collection"></i>
                              <i v-else style="color: rgb(255 219 87)" @click="cancelFavorite(app.appId,index,true)"  class="iconfont iconstar-collection-fill"></i>
                              <i v-if="app.isFav ==0">
                                  {{i18n('head.application','收藏应用')}}
                              </i>
                              <i v-else style="color: rgb(255 219 87)">
                                  {{i18n('head.uncollect','取消收藏')}}
                              </i>
                          </span>
                    </div>
                </li>
            </ul>
        </div>
        <div v-if="useId =='use'">
            <div class="MainUse_recently_head">{{i18n('head.fullApplication','全部应用')}}</div>
            <ul class="MainUse_recently_user">
                <li v-for="(app,index) of tabList" :key="app.appId" v-if="app.hide==false">
                  <div class="MainUse_recently_come">
                      <div :style="{'background':app.backColor}">
                          <span v-show="false"> {{appIcon=JSON.parse(app.icon)}} </span>
                          <em  v-if="['customIcon','userCustomIcon'].includes(appIcon.type)" >
                              <my-icon :type="appIcon.icon"></my-icon>
                          </em>
                          <em v-else>
                              <a-icon  :type="appIcon.icon" />
                          </em>
                      </div>
                      <span>{{$i18(app.title)}}</span>
                  </div>
                  <div class="MainUse_recently_hove">
                      <span @click="preview(app,'tabList')">
                          <i class="iconfont iconicon-test"></i>
                          <i>{{i18n('head.enterApplication','进入应用')}}</i>
                      </span>
                      <span>
                          <i v-if="app.isFav ==0"  @click="Collecting(app.id,index)" class="iconfont iconstar-collection"></i>
                          <i v-else style="color: rgb(255 219 87)" @click="cancelFavorite(app.id,index,true)"  class="iconfont iconstar-collection-fill"></i>
                          <i v-if="app.isFav ==0">
                              {{i18n('head.application','收藏应用')}}
                          </i>
                          <i v-else style="color: rgb(255 219 87)">
                               {{i18n('head.uncollect','取消收藏')}}
                          </i>
                      </span>
                  </div>
                </li>
            </ul>
        </div>
    </div>
</div>
</template>

<script>
import SysAppFavoritesApi from '@/api/system/core/sysAppFavorites';
import {mapState,mapMutations} from 'vuex';
import {getParentPath} from "@/utils/routerUtil";
import miniFront from "@/layouts/miniFront/miniFront";
export default {
    name: "MainUse",
    mixins:[miniFront],
    data(){
        return{
            tabList:[],//全部应用
            favoriteList:[],//收藏应用
            saveLastUseList:[],//最近使用应用
            keyword:''//搜索字段
        }
    },
    computed: {
        ...mapState({
            menus: state => state.appSetting.menus
        })
    },
    props:{
        useId:''
    },
    created(){

    },

    mounted() {
        this.getApps();
        this.favorite();
        this.getLastUseApps();
    },
    methods:{
        i18n(name, text, key) {
            return this.$ti18(name, text, "compomentLang", key);
        },
        ...mapMutations('appSetting', ['setOpenFront','setCollapsed']),
        //    关闭
        close(){
            this.$emit('close')
        },
        //查询全部应用数据
        getApps(){
             var self_=this;
            self_.tabList = self_.menus.filter(item=>{
                if(item.appType ==1){
                    item['hide'] = false
                    return true
                }else {
                    return  false
                }
            })
        },
         //获取最近使用的应用
        getLastUseApps(){
            SysAppFavoritesApi.getLastUseApps().then(item=>{
                if(item.success){
                    for(var obj of item.data){
                        this.$set(obj,'hide',false)
                    }
                    this.saveLastUseList = item.data;
                }
            })
        },
         //添加到最近使用应用
        saveLastUse(appId){
            //isAdd-是否增加（1增加，其他为移除）
            var parameter = {
                appId:appId,
                isAdd:1
            }
            SysAppFavoritesApi.saveLastUse(parameter).then(item=>{})
        },
         //获取全部收藏应用
        favorite(){
            SysAppFavoritesApi.getFavoritesApps().then(res=>{
                if(res.success){
                    for(var obj of res.data){
                        this.$set(obj,'hide',false)
                    }
                    this.favoriteList = res.data;
                }
            })
        },
         //收藏应用
        Collecting(appId,index){
            var parameter = {
                appId:appId
            }
            SysAppFavoritesApi.addFavorite(parameter).then(res=>{
                if(res.success){
                    this.tabList[index].isFav = 1;
                    this.favorite();
                    this.getLastUseApps();
                }
            })
        },
         //取消收藏应用
        cancelFavorite(appId,index,all){
            var parameter = {
                appId:appId
            }
            SysAppFavoritesApi.cancelFavorite(parameter).then(res=>{
                if(res.success){
                    for(var obj of this.tabList){
                        if(obj.id ==appId){
                            obj.isFav = 0;
                        }
                    }
                    this.favorite();
                    this.getLastUseApps();
                }
            })
        },
        filterApps(appId){
            var obj = this.tabList.filter(item=>{
                if(item.id ==appId){
                    return true
                }else {
                    return  false
                }
            })
            return obj[0]
        },
         //预览
        preview(record,test){
            let obj = test =='tabList' ? record : this.filterApps(record.appId);
            //添加最近使用应用
            let url;
            if(record.menuNavType=="1"){
                this.saveLastUse(obj.id);
                url=obj.appPath + "/" +obj.key;
                window.open(url,"_blank");
            }else {
                this.setOpenFront(true);
                this.setCollapsed(true);
                //内置应用
                this.$emit('adhibitionUser',obj);
                this.saveLastUse(obj.id);
                if(record.menuNavType == "2"){//内置微前端
                    //获取微前端第一个菜单和路由；
                    let {firstPath,firstMenu} = this.openFirstFront(record);
                    this.innnerFrontOpen(record,firstPath,firstMenu);
                    return ;
                }
            }
        },
         // 搜索
        search(){
            let keyword=this.keyword;
            //搜索全部应用
            this.tabList =  this.tabList.filter(item=>{
                        if(keyword=='' || item.title.indexOf(keyword)>=0){
                            item['hide'] = false
                        }else{
                            item['hide']=true;
                        }
                       return item;
            })
           //搜索最近使用
            this.saveLastUseList =  this.saveLastUseList.filter(item=>{
                if(keyword=='' || item.clientName.indexOf(keyword)>=0){
                    item['hide'] = false
                }else{
                    item['hide']=true;
                }
                return item;
            })
            //收藏
            this.favoriteList =  this.favoriteList.filter(item=>{
                if(keyword=='' || item.clientName.indexOf(keyword)>=0){
                    item['hide'] = false
                }else{
                    item['hide']=true;
                }
                return item;
            })
        },
    },
    watch:{
        keyword:function (ove){
          this.search()
        }
    }
}
</script>

<style scoped>
.MainUse_recently >div{
    overflow: hidden;
}
.MainUse{
    display: flex;
    flex-direction:column;
    width: 100%;
}
.MainUse >div:nth-child(1){
    height: 65px;
}
.MainUse >div:nth-child(2){
    flex: 1;
    overflow: auto;
}
.MainUse_recently_come{
    width: 140px;
    height: 150px;
}
.MainUse_recently_come >div{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    line-height: 74px;
    margin-top: 30px;
    margin-left: 40px;
    background-color: #00a0e9;
}
.MainUse_recently_come >span{
    text-align: center;
    font-size: 14px;
    display: block;
    color: #333333;
    width: 100%;
    margin-top: 7px;
}
.MainUse_recently_come >div em i{
    font-size: 30px;
    color: white;
}
.MainUse_recently_user{
    padding-top: 15px;
}
.MainUse_recently_hove span{
    height: 75px;
    display: block;
    width: 100%;
    padding-top: 15px;
}
.MainUse_recently_hove span:hover{
    background-color: rgba(41,48,76,0.6);
}
.MainUse_recently_hove span i{
    font-style: normal;
    width: 140px;
    display: block;
    text-align: center;
    color: white;
}
.MainUse_recently_hove>span>i:nth-child(1){
    text-align: center;
    display: block;
    font-size: 25px;
    line-height: 30px;
    color: white;
}
.MainUse_recently_hove{
    width: 140px;
    height: 150px;
    background-color: rgba(41,48,76,0.6);
    backdrop-filter: saturate(180%) blur(4px);
    border-radius: 5px;
    overflow: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;

}
.MainUse_recently_user li {
    width: 140px;
    height: 150px;
    position: relative;
    float: left;

}
.MainUse_recently_user li:hover .MainUse_recently_hove{
    display: block;
}
.MainUse_recently_user li:hover{
    cursor: pointer;
}
.MainUse_recently{
    padding: 0px 20px 20px 20px;
}
.MainUse_recently_head{
    color: #46494d;
    line-height: 40px;
    border-bottom:1px solid #dcdee3;
    font-weight: normal;
    font-stretch: normal;
}
.application-head{
    overflow: hidden;
    padding: 20px;
}
</style>